<template>
  <div class="profile">
    <van-nav-bar title="个人资料" left-arrow @click-left="onClickLeft" />
    <!-- <Top></Top> -->
    <van-cell-group inset class="content">
      <van-cell title="头像" />
      <van-cell title="用户名" :value="username" />
      <van-cell title="性别" :value="sex" />
      <van-cell title="绑定手机" :value="tel" />
      <van-cell title="收货地址" is-link @click="address" />
      <van-cell title="绑定微信" value="已绑定" is-link @click="relieve" />
      <van-cell title="协议与说明" is-link />
    </van-cell-group>
    <div class="btn">
      <van-button round type="info" size="large" color="#6d87c4" @click="quit"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";
import { Dialog } from "vant";
Vue.use(Cell);
Vue.use(CellGroup);
// import Top from "@/components/lsc/top.vue";
import axios from "axios";

export default {
  components: { [Dialog.Component.name]: Dialog.Component },
  methods: {
    onClickLeft() {
      this.$router.push("/my");
    },
    address() {
      this.$router.push("/address");
    },
    relieve() {
      function beforeClose(action, done) {
        if (action === "confirm") {
          setTimeout(done, 1000);
          console.log("解除绑定");
        } else {
          done();
        }
      }
      Dialog.confirm({
        title: "确定解除与微信账号的关联关系吗？",
        message: "",
        confirmButtonText: "确定解绑",
        confirmButtonColor: "blue",
        beforeClose,
      });
    },
    quit() {
      localStorage.removeItem("userName");
      this.$router.push("/login")
    },
  },

  data() {
    return {
      username: "",
      tel: "",
      sex: "",
    };
  },
  created() {
    // axios({
    //   url: "http://localhost:3000/userinfo",
    // }).then((res) => {
    //   this.username = res.data[0].username;
    //   (this.tel = res.data[0].tel), (this.sex = res.data[0].sex);
    // });
    axios({
      url: "/apf/addr/selectAddrByUserId/2",
    }).then((res) => {
      console.log("个人资料 ", res.data.data[0]);
      this.username = res.data.data[0].userName;

      this.tel = res.data.data[0].tel;
      if (res.data.data[0].sex == 1) {
        this.sex = "男";
      }
    });
  },
};
</script>

<style scoped>
/deep/.van-nav-bar {
  background-color: #f5f5f5;
}
/deep/.van-nav-bar .van-icon {
  color: gray;
}

.btn {
  width: 90%;
  margin: 0 auto;
  margin-top: 1.5rem;
}
.content {
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.08rem;
}
.profile {
  height: 6.4rem;
  background-color: #f5f5f5;
}
</style>